<template>
  <div class="twoPie">
       <div id="twoPiemain" style="width: 500px;height:400px;padding:0;"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import {
    AlwaysCopy
} from '@/api/baseManage/flMaintain/index'
export default {
    name:'zhubing',
    data(){
        return{
            echarts: '',
            waterData:[],
            // datas:
            // [
            //     "180.0",
            //     "280.0",
            //     "500.0",
            //     "99.0",
            //     "256.0",
            //     "1000.0",
            //     "1652.0",
            //     "1111.0",
            //     "2529.77",
            //     "1515.0",
            //     "2688.0",
            //     "1545.0"
            // ]
        }
    },
    methods:{
        createEcharts() {
            // 基于准备好的dom，初始化echarts实例
            this.echarts = echarts.init(document.getElementById('twoPiemain'));
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['已完成', '未完成']
                },
                series: [
                    {
                        name: '本年本月总抄表率',
                        type: 'pie',
                        radius: '70%',
                        center: ['60%', '50%'],
                        // avoidLabelOverlap: false,
                        data: [
                            {value: 2447, name: '已完成'},
                            {value: 3563, name: '未完成'},
                        ],
                        color:['#07799a','#0b9ac3'],
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                // shadowColor: 'rgba(0, 0, 0, 0.5)'
                                shadowColor: '#c90010'

                            }
                        }
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            this.echarts.setOption(option);
        },
        // 获取饼状图水量
        async AlwaysCopyData(){
            const res = await AlwaysCopy()
            console.log(res,'qingqiu ');

            this.waterData = res.data[0]
            // console.log(res.data);
            console.log(this.waterData,'zongshuiliang ');
            // console.log(this.data,'zongshuiliang ');
            // 总的
            const AlwaysCopySum = res.data[0].zong
            // 已完成
            const AlwaysCopyed = res.data[0].yiwancheng
            // 未完成
            const notAlwaysCopyed = AlwaysCopySum - AlwaysCopyed
            console.log(AlwaysCopySum,AlwaysCopyed,notAlwaysCopyed,'bingbingbign');


            this.echarts.setOption({

            })
            this.echarts.setOption({
            tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['已完成', '未完成']
                },
                series: [
                    {
                        name: '本年本月总抄表率',
                        type: 'pie',
                        radius: '70%',
                        center: ['60%', '50%'],
                        // avoidLabelOverlap: false,
                        data: [
                            {value: AlwaysCopyed, name: '已完成'},
                            {value: notAlwaysCopyed, name: '未完成'},
                        ],
                        color:['#077992','#0b9ac9'],
                        labelLine: {
                            show: false
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            })

        }
    },
    mounted(){
        this.createEcharts()
        this.AlwaysCopyData()
    }
}
</script>

<style>

</style>
